import React, { forwardRef, useEffect, useImperativeHandle, useState } from 'react';
import FileViewer from 'react-file-viewer'
import ExcelViewer from 'react-excel-viewer';
import DocViewer from 'react-doc-viewer';
import {
    Button,
    DatePicker,
    Form,
    Input,
    Modal,
    Radio,
    Tag,
    Select,
    InputNumber,
    message,
    Row,
    Col,
} from 'antd';
import { modalLayoutLg, modalLayoutSm } from '@/config/layout';
import { request } from 'umi';
const FileViewerComp = (props: any, refs: any) => {
    // const [fileList,setfileList] = useState([]);
    const [file, setfile] = useState(null);
    const [isModalVisible, setIsModalVisible] = useState(false);
    //显示弹窗
    const showModal = () => {
        setIsModalVisible(true);
    };

    //取消
    const handleCancel = () => {
        setIsModalVisible(false);
        setfile(null);
    };
    useImperativeHandle(refs, () => ({
        init: (mfile: any) => {
            setfile(mfile);
            showModal();
        },
    }));
    const onError = () => {

    }

    return (
        <Modal
            title={'附件'}
            visible={isModalVisible}
            onCancel={handleCancel}
            centered
            width={1000}
            maskClosable={false}
            bodyStyle={{
                height: window.innerHeight - 150,
                overflowY: 'auto'
            }}
            footer={
                <Button onClick={handleCancel}>关闭</Button>
            }
        >
            {
                file != null && <>
                    {
                        ['jpg', 'jpeg', 'png'].indexOf(file.fileType) != -1 && <img style={{ width: '100%' }} src={file.url} />

                    }
                    {
                        ['mp4', 'avi', 'rmvb', 'rm', 'm4a', 'mp3'].indexOf(file.fileType) != -1 && <video controls src={file.url} style={{ width: '100%', height: '600px' }}></video>
                    }
                    {
                        ['pdf', 'txt', 'docx', 'doc', 'xlsx', 'xls'].indexOf(file.fileType) != -1 && <iframe
                            src={file.url}
                            title="pdfIframe"
                            width="100%"
                            height="98%"
                        />
                    }

                    {/* {
                        'pdf','docx','txt'
                    } */}

                    {/* <div>{file.fileType}</div>
                    <div>{file.url}</div> */}
                </>
            }


        </Modal>
    );
};
const FileViewerCom = forwardRef(FileViewerComp);

export default FileViewerCom;
